<template>
	<view class="page">
		<wd-collapse v-model="collapse">
			<wd-collapse-item v-for="item in content" :key="item.id" :title="item.create_time" :name="item.id">
				<view class="flex items-center" style="justify-content: space-between;">
					<view class="">
						{{item.sys_user_id}}
					</view>
					<view class="flex items-center " style="gap: 10px;">
						<wd-icon name="tools" size="22px" @click="edit(item)"></wd-icon>
						<wd-icon name="delete" size="22px" @click="remove(item)"></wd-icon>
					</view>
				</view>
				<view style="font-size: 16px;color:#333">
					客户名称：
					<view style="font-size:12px;color: #777;">
						{{item.customer_name}}
					</view>
				</view>
				<view style="font-size: 16px;;color:#333;word-break: break-word;">
					拜访内容：
					<view style="font-size:12px;color: #777;">
						{{item.descript}}
					</view>
				</view>
				<view style="font-size: 16px;;color:#333;word-break: break-word;">
					照片：
					<image :src="fileUploadAction+item.photo" mode="aspectFill" style="width: 120rpx;height: 120rpx;"></image>
				</view>
			</wd-collapse-item>
		</wd-collapse>
		<wd-pagination v-model="pagination.page" :total="pagination.total" @change="handleChange" />
		<view class="empty" v-if="content.length == 0">
			<wd-status-tip image="content" tip="暂无拜访记录" />
		</view>
		<view class="add_btn flex items-center justify-center" @click="addFun">
			<wd-icon name="add" size="22px"></wd-icon>
		</view>

		<wd-message-box />
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		getVisitList,
		deleteVisit
	} from "@/api/form.js"
	import { useMessage } from '@/uni_modules/wot-design-uni'


	import {
		onLoad,
		onShow,
		onPullDownRefresh
	} from '@dcloudio/uni-app'

	import { API_BASE_URL } from "@/utils/request.js"
	const fileUploadAction = ref(`${API_BASE_URL}/tbx/`)

	const message = useMessage()
	const content = ref([])
	const collapse = ref([])
	const pagination = reactive({
		page: 1,
		pageSize: 10,
		total: 0
	})



	const fetchData = () => {
		getVisitList({
			hasQuery: true,
			column: "id",
			order: "asc",
			pageNo: pagination.page || 1,
			size: pagination.pageSize
		}).then(res => {
			uni.stopPullDownRefresh()
			console.log(res)
			collapse.value =[ `${res.records[0].id}` || ""]
			pagination.total = res.total
			content.value = res.records || []
		})
	}

	onShow(() => {
		fetchData()
	})


	onPullDownRefresh(() => {
		pagination.page = 1
		fetchData()
	})



	const handleChange = (e) => {
		pagination.page = e.value
		fetchData()
	}

	const addFun = () => {
		uni.navigateTo({
			url : "/pages/form/visit_edit"
		})
	}

	const edit = (e) =>{
		uni.navigateTo({
			url : `/pages/form/visit_edit?id=${e.id}`
		})
	}

	const remove = (e) =>{
		message
		  .confirm({
		    msg: '确定删除吗？',
		    title: '删除'
		  })
		  .then(() => {
				deleteVisit(e.id).then(res =>{
					if(res){
						uni.showToast({
							icon : "none",
							title: "删除成功"
						})
						fetchData()
					}
				})
		  })
	}
</script>


<style lang="scss" scoped>
	.relative {
		position: relative;
	}

	.h-full {
		min-height: 100vh;
		padding-bottom: 20rpx;
	}

	.btn {
		margin-top: 20rpx;
		width: 180rpx;
		margin-left: 80%;
	}

  .empty {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }


	.add_btn {
		position: fixed;
		bottom: 120rpx;
		right: 40rpx;
		height: 100rpx;
		width: 100rpx;
		border-radius: 50%;
		box-shadow: 0 0 12px 0 rgba(#1b1b1b, .2);
		color: #fff;
		background-color: #3775E9;
	}

	.physical {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 4px 0px #efefef;
		padding: 40rpx;
		color: #666;

		&_header {
			border-bottom: 1px solid #efefef;
			padding: 8rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&_store {
				font-size: 16px;
				font-weight: 600;
				color: #333;
			}

			&_pauseTimes {
				font-size: 12px;
				color: #f59e0b;

			}
		}

		&_body {
			padding: 40rpx 0;
			border-bottom: 1px solid #efefef;
			font-size: 12px;

			&_name {
				font-size: 16px;
				color: #f43f5e;
				font-weight: 600;
				display: inline-block;
			}
		}

		&_footer {
			font-size: 12px;
			border-bottom: 1px solid #efefef;
			padding: 10rpx 0;

			&_time {
				padding-top: 10rpx;
			}

			&_storeAddress {
				padding: 10rpx 0;
			}
		}

		&_actions {
			padding-top: 20rpx;
			display: flex;
			align-items: center;
			justify-content: end;
			color: #00acac;
		}
	}
</style>
